<template>
<div class="commentContainer">
    <h1 class="commentHead">发表评论</h1>
    <textarea class="commentBody" cols="6" rows="3" placeholder="请输入评论" maxlength="12" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="comment-list">
        <div class="comment-item" v-for="(item, index) in commentData" :key="index">
            <div class="comment-head">
                <span>第{{index+1}}楼</span>
                <span>用户:{{item.user_name}}</span>
                <span>发表时间:{{item.add_time}}</span>
            </div>
            <div class="body">
                <span>{{item.content==='undefined'?message:item.content}}</span>
            </div>
        </div>
    </div>
    <mt-button type="primary" size="large" @click="getMoreData" plain>更多</mt-button>
</div>
</template>

<script>
import {
    Toast
} from "mint-ui";

export default {
    data() {
        return {
            message: "这家伙很懒,什么也没说",
            pageindex: 1,
            commentData: [],
            msg: ""
        };
    },
    props: ["id"],
    created() {
        this.getData();
    },
    methods: {
        getData() {
            console.log(this);
            this.$http
                .get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex)
                .then(result => {
                    this.$http;
                    if (result.body.status === 0) {
                        this.commentData = this.commentData.concat(result.body.message);
                    } else {
                        Toast("获取评论失败");
                    }
                });
        },
        getMoreData() {
            this.pageindex++;
            this.getData();
        },
        postComment() {
            if (this.msg.trim().length === 0) {
                return Toast("评论内容不能为空");
            }
            this.$http
                .post("api/postcomment/" + this.$route.params.id, {
                    comment: this.msg.trim()
                })
                .then(result => {
                    if (result.body.status === 0) {
                        this.pageindex = 1;
                        this.getData();
                        this.msg=''
                        Toast(result.body.message);
                    } else {
                        Toast("添加评论失败");
                    }
                });
        }
    }
};
</script>

<style lang="scss">
.commentContainer {
    .comment-list {
        line-height: 36px;
    }

    .comment-head {
        background: #ccc;
        display: flex;
        justify-content: space-between;
    }
}
</style>
